<template>
    <div class="user-management-table">
        <HTable :data="userList" :total="userCount" :pageSize="pageSize.size" :fields="userFields"
            @pageChangeHandle="pageChangeHandle" @handleEdit="handleEdit" @handleDelete="handleDelete" editText="编辑"
            deleteText="删除"></HTable>
    </div>
</template>
<script lang="ts" setup>
import HTable from "@/components/ElementPlusWrapper/table/HTable.vue"
import { computed, ref, watch } from "vue"
import { useStore } from "vuex"

const store = useStore()
const userList = computed(() => {
    return store.getters["admin/userManagement/getUserList"].map(user => {
        if (user.camera && user.camera.length > 0 && Array.isArray(user.camera) && !user.cameraStr) {
            user.cameraStr = user.camera?.map(camera => camera.name).join(",")
        }
        return user
    })
})
const userFields = computed(() => store.state.admin.userManagement.userFields)
const userCount = computed(() => store.state.admin.userManagement.userCount)
const pageSize = computed(() => store.state.admin.userManagement.userListPageAndSize)

const pageChangeHandle = (page: number) => {
    store.commit('admin/userManagement/_getAndUpdateUserList', {
        page: page || store.getters['admin/userMangement/getPage'],
        pageSize: store.getters['admin/userMangement/getSize']
    })
}
const handleEdit = (index?: number, row?: any) => {
    row.camera = row.camera?.map(camera => camera._id)
    store.commit('admin/userManagement/_setState', { path: 'userForm', value: Object.assign({}, row) })
    store.commit('admin/userManagement/_setState', { path: 'userFormComponent.formStatus', value: '编辑' })
}
const handleDelete = (index: number, row: any) => {
    store.dispatch("admin/userManagement/deleteUser", { user: row, index });
}

</script>
